@import "../../../styles/mixins";

@keyframes shade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.select {
  display: inline-block;
  position: relative;
  z-index: 1;
  input {
    cursor: pointer !important;
  }

  &__options {
    position: absolute;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: shade 0.2s alternate;
    border-radius: var(--radius);
    @include shadow-box(var(--border-color));
    li {
      padding: calc(var(--base-padding) / 2);
      cursor: pointer;
      position: relative;
      &:not(:last-child) {
        &::after {
          content: "";
          left: calc(var(--base-padding) / 2);
          right: calc(var(--base-padding) / 2);
          bottom: -1px;
          height: 1px;
          position: absolute;
          background-color: var(--border-color);
          // transform: translateY(50%);
        }
      }

      &:hover {
        background-color: var(--border-color);
        &::after {
          bottom: 0;
        }
      }
    }
  }
}
